<style type="text/css" scoped src="../styles/login.css">
</style>
<template>
    <div class="loginBox">
        <div id="particles" class="loginback"></div>
        <Row type="flex" justify="center" align="middle">
            <Col :lg="{span:8}" :md="{span:8}" :sm="{span:12}" :xs="{span:22}">
            <div class="loginDiv">
                <Row>
                    <Col span="24">
                        <h1>云南省蔬菜生产信息监测</h1>
                        <h1>网上填报系统</h1>
                    </Col>
                </Row>
                <Row>
                    <Col span="24" align="middle">
                    <Form ref="UserModel" :model="UserModel" :rules="UserRule">
                        <row>
                            <Col span="24">
                            <form-item prop="Account">
                                <Input type="text" v-model="UserModel.Account" size="large" placeholder="请输入用户名" @keyup.enter.native="LoginIn('UserModel')">
                                <Icon type="person" slot="prepend" size='22' color="#60635F"></Icon>用户名
                                </Input>
                            </form-item>
                            </Col>
                            <Col span="24">
                            <form-item prop="Passwords">
                                <Input type="password" v-model="UserModel.Passwords" size="large" placeholder="请输入密码" @keyup.enter.native="LoginIn('UserModel')">
                                <Icon type="locked" slot="prepend" size='22' color="#60635F"></Icon>密&nbsp;&nbsp;&nbsp;码
                                </Input>
                            </form-item>
                            </Col>
                            <Col span="12">
                            <form-item prop="validateCode">
                                <Input type="text" v-model="UserModel.validateCode" size="large" placeholder="请输入验证码"  @keyup.enter.native="LoginIn('UserModel')">
                                    <Icon type="locked" size='22' slot="prepend" color="#60635F"></Icon>验证码:
                                </Input>
                            </form-item>
                            </Col>
                            <Col span="8" style="float:right">
                            <div @click="createCode" class="code" id="checkCode" title="点击切换"></div>
                            <!--<a href="#" @click="createCode()">看不清换一张</a>
                                             <img src="../images/logo.png" alt="验证码" class="imgCode" width="60px" height="30px" />-->
                            </Col>
                            <Col span="24">
                            <form-item>
                                <Button  size="large" type="primary" long @click="LoginIn('UserModel')"  @keyup.enter.native="LoginIn('UserModel')">登&nbsp;&nbsp;&nbsp;&nbsp;录 </Button>
                            </form-item>
                            </Col>
                        </row>
                    </Form>
                    </Col>
                </Row>
            </div>
            </Col>
        </Row>
    </div>
</template>

<script>
    import JParticles from 'jparticles';
    export default {
        data: function() {
            //验证码验证
            const validateVerCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码！'));
                } else {
                    if (value.toUpperCase() !== this.verCode.toUpperCase()) {
                        callback(new Error('验证码不正确!'));
                    }
                    callback();
                }
            }
            return {
                verCode: '',
                UserModel: {
                    Account: '',
                    Passwords: '',
                    validateCode: ''
                },
                UserRule: {
                    Account: [{
                        required: true,
                        message: '请填写登录帐号',
                        trigger: 'blur'
                    }],
                    Passwords: [{
                            required: true,
                            message: '请填写登录密码',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            min: 6,
                            message: '密码长度不能小于6位',
                            trigger: 'blur'
                        }
                    ],
                    validateCode: [{
                        validator: validateVerCode,
                        trigger: 'blur'
                    }]
                }
            }
        },
        mounted() {
            new JParticles.particle('#particles', {
                color: '#FFFFFF',
                // range: 2000,
                // proximity: 100,
                range: 200,
                proximity: 100,
                parallax: true,
                parallaxStrength: 100
            });
            // new JParticles.wave('#particles', {
            //     num: 3,
            //     // 不填充
            //     fill: false,
            //     // 绘制边框，即线条
            //     line: true,
            //     // 三条线依次的颜色
            //     lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
            //     // 三条线依次的宽度
            //     lineWidth: [.5, .7, .9],
            //     // 三条线依次距左的偏移值
            //     offsetLeft: [5, 3, 0],
            //     // 三条线都向上偏移容器高度的 0.75 倍
            //     offsetTop: .75,
            //     // 三条线依次的波峰高度
            //     crestHeight: [10, 14, 18],
            //     // 三条线都只有两个波峰（波纹）
            //     rippleNum: 2,
            //     speed: .1
            // });
        },
        methods: {
            LoginIn(name) { //登录事件
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var self = this;
                        self.$http.post('Account', self.UserModel).then(function(res) {
                            if (res.data.status == 1) {
                                var CurrentUserModel = new Object();
                                CurrentUserModel.Account = res.data.model.Account;
                                CurrentUserModel.UserId = res.data.model.Id;
                                CurrentUserModel.UserName = res.data.model.UserName;
                                CurrentUserModel.AreaCode = res.data.model.AreaCode;
                                self.SetlocaStorage("VegUserInfo", CurrentUserModel);
                                self.SetlocaStorage("useractionlist", res.data.model.ActionList);
                                self.$router.push('/home'); //登录跳转
                            } else {
                                self.$Modal.error({
                                    title: '提示信息',
                                    content: res.data.message
                                });
                            }
                        });
                    }
                });
            },
            //重置
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            createCode() { //创建验证码
                this.verCode = "";
                var codeLength = 4; //验证码的长度
                var checkCode = document.getElementById("checkCode");
                var codeChars = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9,
                    'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
                for (var i = 0; i < codeLength; i++) {
                    var charNum = Math.floor(Math.random() * 52);
                    this.verCode += codeChars[charNum];
                }
                if (checkCode) {
                    checkCode.className = "code";
                    checkCode.innerHTML = this.verCode;
                }
            },
            getAreaTreeData() {
                var self = this;
                self.$http.get('Area/GetCascaderTree', {
                    params: {
                        id: ""
                    }
                }).then(function(res) {
                    self.SetlocaStorage("areatreelist", res.data.model);
                });
            },
            getAreaData() {
                var self = this;
                this.$http.get('Area').then(function(res) {
                    self.SetlocaStorage("arealist", res.data.model);
                });
            },
            getDictData() {
                var self = this;
                this.$http.get('Dict/GetList').then(function(res) {
                    self.SetlocaStorage("dictlist", res.data.model);
                });
            }
        },
        //创建Vue页面方法
        created: function() {
            this.getAreaTreeData();
            this.getAreaData();
            this.getDictData();
            setTimeout(() => {this.createCode();}, 500);
        }
    }
</script>